// flex 相关的通用 class 名称
// 常用的横向 flex 布局，默认居中对齐
.flex {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	align-items: center;
}
// 常用的纵向 flex 布局
.flex-col {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
}
// 可换行 flex 布局
.flex-wrap {
	flex-wrap: wrap;
}
// 不可换行 flex 布局
.flex-nowrap {
	flex-wrap: nowrap;
}

// 主轴方向对齐方式
.justify-start {
	justify-content: flex-start;
}
// 主轴方向对齐方式
.justify-end {
	justify-content: flex-end;
}
// 主轴方向对齐方式
.justify-center {
	justify-content: center;
}
// 主轴方向对齐方式
.justify-between {
	justify-content: space-between;
}
// 主轴方向对齐方式
.justify-around {
	justify-content: space-around;
}
// 交叉方向对齐方式
.align-start {
	align-items: flex-start;
}
// 交叉方向对齐方式
.align-end {
	align-items: flex-end;
}
// 交叉方向对齐方式
.align-center {
	align-items: center;
}
// 交叉方向对齐方式
.align-baseline {
	align-items: baseline;
}
// 交叉方向对齐方式
.align-stretch {
	align-items: stretch;
}
// 交叉方向对齐方式
.self-start {
	align-self: flex-start;
}
// 交叉方向对齐方式
.self-end {
	align-self: flex-end;
}

// 定义flex等分 1-6
@for $i from 1 through 6 {
	.flex-#{$i} {
		flex: $i;
	}
}
.flex-none {
	flex: none;
}
.flex-auto {
	flex: auto;
}
